import React, { PropTypes } from "react"
import ReactDOM from "react-dom"
require('./RecipentCard.less')

class RecipentCard extends React.Component {
    static propTypes = {
        flag_type: PropTypes.string,
        order_id: PropTypes.string,
        btn_type: PropTypes.string,
        order: PropTypes.string,
        from_city: PropTypes.string,
        to_city: PropTypes.string,
        from_name: PropTypes.string,
        to_name: PropTypes.string,
        log_info: PropTypes.string,
        log_time: PropTypes.string,
        title: PropTypes.string,
    }
    static defaultProps = {
        title: "",
        express_company: "",
        express_number: "",
        wait_time: "",
        label_name: "",
        label_number: "",
        type: "",
        receive_time: "",
    }
    static unreceived_package = {
        title: "宏源大厦2201室前...宝1号智能快件箱",
        express_company: "韵达快递",
        express_number: "3977540050912",
        wait_time: "1天3时6分5秒",
        label_name: "箱门号",
        label_number: "3244"
    }
    static received_package = {
        type: "todo",
        title: "宏源大厦2201室前台近邻宝货架",
        express_company: "韵达快递",
        express_number: "3977540050912",
        receive_time: "2016-10-12 13:10:00",
    }
    constructor(props) {
        super(props)
    }
    tobeReceived() {
        const data = this.props.dataSource
        const wait_time = data.wait_time || ""
        let cls_name = "span"
        if(wait_time.indexOf("天") > -1){
            cls_name = "span wait_time_red"
        }
        return (
            <div className="recipient-card__content_wait">
                <div className="recipient-card__content_wait_time">
                    <div className="label">等待时间</div>
                    <div className={cls_name}>{data.wait_time}</div>
                </div>
                <i className="jiantou"></i>
                <div className="recipient-card__content_wait_number">
                    <div className="label">{data.label_name}</div>
                    <div className="span">{data.label_number}</div>
                </div>
            </div>
        )
    }
    haveReceived() {
        const data = this.props.dataSource
        return (
            <div className="recipient-card__content_wait">
                <i className="jiantou"></i>
                <div className="recipient-card__content_wait_time no-border">
                    <div className="label">取件时间</div>
                    <div className="span">{data.receive_time}</div>
                </div>
            </div>
        )
    }
    render() {
        let data = this.props.dataSource
        const receiving = data.mode === "todo" ? this.haveReceived() : this.tobeReceived()
        let icon = null
        if(data.type === 2){
            //2是货架
            icon = <div className="recipient-card__title_icon">
                        <i className={`iconfont icon-huojia`}></i>
                    </div>
        }else {
            //1是快件箱
            icon = <div className="recipient-card__title_icon iconkuaijian">
                        <i className="iconkuaijian_content" ></i>
                    </div>
        }
        if(data.order_type === 4){
            //4为信报
            icon = <div className="recipient-card__title_icon">
                        <i className={`iconfont icon-xinxiang-icon`}></i>
                    </div>
            data.express_number = ""
        }
        return (
            <div className="recipient-card" onClick={this.props.onClick}>
                <div className="recipient-card__title">
                    {icon}
                    <span>{data.title}</span>
                </div>
                <div className="recipient-card__content">
                    <div className="recipient-card__content_number">
                        <div className="label label-colon">
                            {data.express_company}
                        </div>
                        <div className="span">
                            {data.express_number}
                        </div>
                    </div>
                    {receiving}
                </div>
            </div>
        )
    }
}

module.exports = RecipentCard